<template>
	<view class="container">
		<view class="body">
			<!-- 店铺 -->
			<!-- <view class="b-box">
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<picker class="card-box-body-picker" @change="selectShop" :value="shopIndex" :range="shopList"
							range-key="name">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									活动店铺
								</view>
								<view class="list-con-item list-con-right">

									{{shopIndex > -1 ? shopList[shopIndex].name : '选择店铺'}}

									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>

					</view>
				</view>
			</view> -->
			<!-- 时间配置 -->
			<view class="b-box">
				<view class="card-box-head u-flex u-col-center">
					时间配置
				</view>
				<view class="card-box">
					<view class="card-box-body card-box-body-cloumn">
						<picker class="card-box-body-picker" mode="date" :value="model.start_time" :start="startDate"
							:end="endDate" @change="bindDateChangeStart">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									开始时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.start_time}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
						<picker class="card-box-body-picker" mode="date" :value="model.end_time"
							:start="model.start_time" :end="endDate" @change="bindDateChangeEnd">
							<view class="list-conten">
								<view class="list-con-item list-con-left">
									<uni-icons style="margin-right: 10rpx;" type="star-filled" color="#ff9000"
										size="18">
									</uni-icons>
									结束时间
								</view>
								<view class="list-con-item list-con-right">
									{{model.end_time}}
									<uni-icons type="arrowright"></uni-icons>
								</view>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="sub">
			<button :loading="requestIng" :disabled="requestIng" @tap.stop="download">导出</button>
		</view>
		<!-- <view class="pop-box">
			
		</view> -->
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				requestIng: false,
				model: {
					shop_id: 1,
					start_time: '',
					end_time: '',
				},
				shopIndex: -1,
				downloadUrl: ''
			}
		},
		computed: {
			...mapGetters(['shopList', 'userInfo']),
			bill() {
				console.log('执行bill')
				if (this.model.shop_id > 0 && this.model.start_time != '' && this.model.end_time != '') {
					console.log('执行bill-if')
					this.getDownloadUrl()
				}
				return null;
			}
		},
		onLoad(e) {

		},
		methods: {
			selectShop(e) {
				this.shopIndex = e.detail.value
				this.model.shop_id = this.shopList[this.shopIndex].id
			},
			bindDateChangeStart(e) {
				this.model.start_time = e.detail.value
			},
			bindDateChangeEnd(e) {
				this.model.end_time = e.detail.value
			},
			async getDownloadUrl() {
				let that = this;
				that.$util.loading('生成中');
				new Promise((resolve, reject) => {
					that.$http('money.bill', that.model).then(async res => {
							console.log('账单', res)
							that.requestIng = false
							uni.hideLoading()
							if (res.code === 1) {
								that.$util.msg('生成成功，请点击导出下载');
								that.downloadUrl = res.data?.url
								resolve(res.data);
							} else {
								resolve(false);
							}
						})
						.catch(async err => {
							that.requestIng = false
							uni.hideLoading()
							resolve(false);
						})
				});
			},
			download() {
				let that = this;
				if (that.downloadUrl == '') {
					that.$util.msg('请选择导出配置');
					// return;
				}
				const downloadTask = uni.downloadFile({
					// url: 'https://bwc2.trnall.cn/uploads/200220503/abc.docx',
					url: 'https://bwc2.trnall.cn/uploads/20220325/babfb4b6464a607bce6496298b36a5a0.png',
					filePath:wx.env.USER_DATA_PATH+'abc',
					success: (res) => {
						console.log('abc', res)
						if (res.statusCode === 200) {
							console.log('下载成功', res);
							// uni.openDocument({
							// 	filePath: res.tempFilePath,
							// 	showMenu: true,
							// 	success: function(res) {
							// 		console.log('打开文档成功');
							// 	}
							// });
						}
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: function(red) {
								that.$util.msg('保存成功，路径为' + red.savedFilePath)
							}
						});
					},
					fail(err) {
						console.log('err', err)
					}
				});

				downloadTask.onProgressUpdate((res) => {
					console.log('下载进度' + res.progress);
					console.log('已经下载的数据长度' + res.totalBytesWritten);
					console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			},
			download2() {
				let that = this;
				/* if (that.xieyiStatus != 1) {
					that.$util.msg('请确认协议')
					return
				}; */
				!that.requestIng && ((that.$util.loading('提交中'), that.requestIng = true),
					that.$http('user.apply', that.model).then(res => {
						console.log('申请入驻返回值', res)
						that.requestIng = false
						uni.hideLoading()
						if (res.code === 1) {
							that.$util.msg(res.msg || '提交成功');
							this.$store.dispatch('getUserInfo');
							setTimeout(function() {
								that.$util.jump('/pages/index/index', 'switchTab')
							}, 1500)
							resolve(res.data);
						} else {
							that.$util.msg(res.msg || '提交失败');
							resolve(false);
						}
					})
					.catch(err => {
						that.requestIng = false
						uni.hideLoading()
					}))
			},
			changeXiYi() {
				this.xieyiStatus = Math.abs(this.xieyiStatus - 1)
			},
			goXieYi() {
				this.$util.jump('/pages/article/article-detail?id=12')
			},
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh')
			setTimeout(function() {
				uni.stopPullDownRefresh()
				console.log('stopPullDownRefresh')
			}, 1000)
		}
	}
</script>

<style lang="scss">
	@import '../../common/style/city.css';

	.container {
		background: #eee;
		min-height: 100vh;

		.body {
			margin: 30rpx 0 120rpx;

			.b-box {
				margin-top: 30rpx;
			}
		}

		.card-box-head {
			color: #222;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			width: 90%;
			margin-left: 5%;
			height: 50rpx;
			align-items: center;
			margin-bottom: 20rpx;
			font-weight: 700;
		}

		.card-box {
			width: 90%;
			min-height: 100rpx;
			margin: 0 5%;
			background: #FFF;
			background-size: 100% 100%;
			box-shadow: 0px 7rpx 11rpx 2rpx rgba(213, 175, 97, 0.34);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 1;




			&-body {
				width: 90%;
				margin: 0 5%;
				display: flex;

				.card-box-body-picker {
					width: 100%;
					height: 100%;
				}

				.cb-wallet-item {
					display: flex;
					flex-direction: column;
					flex: 1;

					.cb-wallet-item-num {
						font-size: 40rpx;
						font-weight: 700;
					}

					.cb-wallet-item-tip {
						font-size: 28rpx;
					}
				}
			}

			&-body-cloumn {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28rpx;

				.no-shop-tip {
					color: #888;
					margin-bottom: 20rpx;
				}

				button {
					color: #ff9000;
					background: #fff;
					border: 1px solid #ff9000;
					border-radius: 37px;
					height: 74rpx;
					line-height: 74rpx;
					width: 180rpx;
					font-size: 28rpx;
				}

				.list-conten {
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 100rpx;
					align-items: center;
					font-size: 28rpx;
					color: #888;

					.list-con-item {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						font-weight: 500;
						color: #666;
					}

					.list-con-active {
						color: #ff9000;

					}

					.list-con-left {}

					.list-con-right {
						color: #bbb;
						font-size: 24rpx;
						font-weight: 400;
					}

					.tbsm {
						width: 75%;
						height: 80%;

						input {
							width: 100%;
							background: #fff;
							height: 80%;
						}
					}
				}
			}

			.recharge {
				height: 60rpx;
				line-height: 60rpx;

				font-weight: 600;
				font-size: 34rpx;
				color: #ff9000;
				text-align: center;

			}
		}

		.b-box .card-box-xieyi {
			font-size: 28rpx;
			font-weight: 400;
			justify-content: flex-start;

			.xieyi {
				margin-left: 10rpx;
			}

			text {
				color: #ff9000;
			}
		}
	}

	.sub {
		position: fixed;
		z-index: 2;
		background: #fff;
		height: 80rpx;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		bottom: var(--window-bottom);
		/* #endif */
		/* #ifndef H5 */
		left: 0;
		right: 0;
		bottom: 0;
		/* #endif */
		padding: 10rpx 0;

		button {
			height: 100%;
			margin: 0 10%;
			border: none;
			background: #ff9000;
			border-radius: 80rpx;
			color: #fff;
		}

	}

	.uni-popup__wrapper {
		border-radius: 10px;
	}
</style>
